<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Facet validation.</title>
      <style type="text/css">
      @namespace xf url("http://www.w3.org/2002/xforms");
         xf|input {
            /* display: table-row; */
            line-height: 2em;
         }
         
         xf|label {
            /* display: table-cell; */
            text-align: right;
            font-family: Ariel, Helvetica, sans-serif;
            font-weight: bold;
            font-size: medium;
            padding-right: 5px;
            width: 130px;
         }
         
         *:required {
             background-color: yellow;
         }
         
         *:invalid  {
            background-color: pink;
         }
      </style>
      <xf:model id="test" schema="schema.xsd">
         <xf:instance src="instance.xml" />
      </xf:model>
   </head>
   <body>
      <xf:group model="test" nodeset="/Data">
         <p>
            <xf:input ref="string-length-2" incremental="true">
               <xf:label>Length exactly 2:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-min-3" incremental="true">
               <xf:label>Length 3 or more:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-max-5" incremental="true">
               <xf:label>Length 5 or less:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-5-7" incremental="true">
               <xf:label>Length 5 to 7:</xf:label>
            </xf:input>
         </p>
      </xf:group>
   </body>
</html>
